<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-title" content="17sucai">
<title>GSAP New Year Countdown Clock</title>

<style>
	/* latin */
	@font-face {
		font-family: 'Major Mono Display';
		font-style: normal;
		font-weight: 400;
		src: url(static/font/RWmVoLyb5fEqtsfBX9PDZIGr2tFubRh7DXeR.woff2) format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	.holder {
		position: absolute;
		background-color: #ffffff;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
	}
	.new-year {
		font-family: 'Major Mono Display', monospace;
		color: #333333;
		font-size: 20px;
		position: absolute;
		left: 50%;
		top: 50%;
		width: 100%;
		transform: translateX(-50%) translateY(-50%);
		text-align: center;
	}
	.year {
		position: relative;
		left: 50%;
		display: table;
		font-size: 6em;
		transform: translateX(-50%);
	}
	.year2 {
		transform: translateX(-50%) rotateX(180deg);
		opacity: 0.2;
	}
	.digit {
		display: inline-block;
		margin: 0px;
		padding: 0px;
		position: relative;
		opacity: 0;
	}
	.controls {
		margin-top: 30px;
	}
	.control {
		display: inline-block;
		padding-left: 20px;
		padding-right: 20px;
		font-size: 0.8em;
		border-left: 1px solid #333333;
		opacity: 0;
		position: relative;
		top: 100px;
	}
	.control:first-child {
		border-left: none;
	}
	.triangles {
		position: absolute;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.triangle {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-bottom: 5px solid #333333;
		position: absolute;
		opacity: 0;
	}
</style>

<script>
	window.console = window.console || function(t) {};
</script>
<script>
	if (document.location.search.match(/type=embed/gi)) {
		window.parent.postMessage("resize", "*");
	}
</script>

</head>

<body translate="no">
<div class="holder">
<div class="new-year">

</div>
</div>

<script src="static/js/zzsc.js"></script>

<script src='static/js/TweenMax.min.js'></script>
<script id="rendered-js">
/* Timelines could have been written in a better way, I am sorry if I wrote them in a hurry. :D */
(function () {
	var animation = {
		newYear: document.querySelector(".new-year"),
		range: function (min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		},
		get period() {
			var dateFuture = new Date(new Date().getFullYear() + 1, 0, 1);
			var dateNow = new Date();
			var seconds = Math.floor((dateFuture - dateNow) / 1000);
			var minutes = Math.floor(seconds / 60);
			var hours = Math.floor(minutes / 60);
			var days = Math.floor(hours / 24);
			hours = hours - days * 24;
			minutes = minutes - days * 24 * 60 - hours * 60;
			seconds = seconds - days * 24 * 60 * 60 - hours * 60 * 60 - minutes * 60;
			return {
				year: new Date().getFullYear() + 1,
				days: days,
				hours: hours,
				minutes: minutes,
				seconds: seconds };

		},
		element: function (parent, type, className, html) {
			var element = document.createElement(type);
			element.className = className;
			if (typeof html !== "undefined") element.innerHTML = html;
			parent.appendChild(element);
			return element;
		},
		year: function (className) {
			var timeline = new TimelineMax();
			var year = animation.element(animation.newYear, "div", className);
			for (var i = 0; i <= String(animation.period.year).length - 1; i++) {
				var digit = animation.element(year, "div", "digit", String(animation.period.year).substr(i, 1));
				digit.style.top = 0 - digit.clientHeight * 2 + "px";
				timeline.
				to(digit, 0.5, { top: 0, opacity: 1, ease: Bounce.easeOut });
			}
			return year;
		},
		animate: function () {
			var year1 = animation.year("year year1");
			var year2 = animation.year("year year2");
			var controls = animation.element(animation.newYear, "div", "controls");
			var days = animation.element(controls, "div", "control days");
			var hours = animation.element(controls, "div", "control hours");
			var minutes = animation.element(controls, "div", "control minutes");
			var seconds = animation.element(controls, "div", "control seconds");
			animation.controls = {
				controls: controls,
				days: days,
				hours: hours,
				minutes: minutes,
				seconds: seconds };

			animation.render();
			var triangles = animation.element(year1, "div", "triangles");
			var fullTimeline = new TimelineMax();
			var triangleStorage = [];
			for (var i = 0; i <= 50 - 1; i++) {
				var timeline = new TimelineMax({ repeat: -1 });
				var triangle = animation.element(triangles, "div", "triangle");
				triangle.style.top = -50 + "px";
				var time = animation.range(0, 100) / 100;
				var duration = 1;
				var direction = animation.range(1, 2) == 1 ? -1 : 1;
				timeline.
				set(triangle, { scale: animation.range(10, 20) / 10 }, time).
				to(triangle, duration * 0.5, { opacity: 1 }, time).
				to(triangle, duration, { top: "200%", rotationZ: animation.range(180, 360) * direction, rotationX: animation.range(180, 360) * direction }, time).
				to(triangle, duration * 0.5, { opacity: 0 }, time + duration * 0.5);
				fullTimeline.add(timeline, 0);
				triangleStorage.push(triangle);
			}
			var previousWidth = 0;
			var checkWidth = function () {
				if (Math.abs(previousWidth - year1.clientWidth) > 1) {
					for (var i = 0; i <= triangleStorage.length - 1; i++) {
						triangleStorage[i].style.left = -5 + animation.range(0, year1.clientWidth) + "px";
					}
					previousWidth = year1.clientWidth;
				}
				setTimeout(checkWidth, 100);
			};
			checkWidth();
			return new TimelineMax().
			to(days, 0.5, { top: 0, opacity: 1 }, 0).
			to(hours, 0.5, { top: 0, opacity: 1 }, 0.25).
			to(minutes, 0.5, { top: 0, opacity: 1 }, 0.5).
			to(seconds, 0.5, { top: 0, opacity: 1 }, 0.75).
			set(triangles, { opacity: 1 }, 3).
			add(fullTimeline, 3);
		},
		plural: function (property) {
			var period = animation.period;
			if (String(period[property]).length <= 1) period[property] = "0" + period[property];
			return Number(period[property]) > 1 ? period[property] + " " + property : period[property] + " " + property.substr(0, property.length - 1);
		},
		render: function () {
			animation.controls.seconds.innerHTML = animation.plural("seconds");
			animation.controls.minutes.innerHTML = animation.plural("minutes");
			animation.controls.hours.innerHTML = animation.plural("hours");
			animation.controls.days.innerHTML = animation.plural("days");
			requestAnimationFrame(animation.render);
		} };

	animation.animate();
})();
//# sourceURL=pen.js
</script>

</body>
</html>